<template>
  <div class="box">
    <div class="taiji" ref="myecharts" @mousemove="enterPie" @mouseleave="leavepie"></div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  inject: ["name", "txet"],
  methods: {
    setEcharts() {
      this.myChart = this.$echarts.init(this.$refs.myecharts);
      let option = {
        backgroundColor: "#eee",
        series: [
          {
            type: "pie",
            color: ["#fff", "#000"],
            center: ["50%", "160"],
            radius: [0, 140],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: [
              {
                value: 50,
                name: "Chrome",
              },
              {
                value: 50,
                name: "Firefox",
              },
            ],
          },
          {
            type: "pie",
            color: ["#000"],
            center: ["50%", "90"],
            radius: [0, 70],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: [
              {
                value: 50,
              },
            ],
          },
          {
            type: "pie",
            center: ["50%", "230"],
            radius: [0, 70],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: "#fff",
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["50%", "100"],
            radius: [0, 20],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: "#fff",
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["50%", "230"],
            radius: [0, 20],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: "#000",
                },
              },
            ],
          },
        ],
      };

      this.myChart.setOption(option);
    },
    enterPie() {
      this.$refs.myecharts.style.animationPlayState = "paused"; //运行动画
    },
    leavepie() {
      this.$refs.myecharts.style.animationPlayState = "running"; //运行动画
    },
  },
  mounted() {
    //改变普通函数this指向vue
    function person(a, b, c) {
      console.log(131, this.txet);
    }
    const obj = { name: "owl", age: 18 };
    person.apply(this);
    console.log(9, this.txet);
    this.setEcharts();
    this.$refs.myecharts.style.animationPlayState = "running"; //运行动画
  },
};
</script>

<style lang='scss'scoped>
.box {
  border: 1px solid rgb(19, 57, 246);
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background: "#eee";
  background: #eee;
  .taiji {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    animation: change 1s;
    animation-play-state: paused; //暂停动画
    animation-iteration-count: infinite;
    animation-timing-function: "linear";
    cursor: pointer;
  }
  @keyframes change {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>